<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
	<title>Insert title here</title>
	<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
	
	<script type="text/javascript">
	
		function addRow() {
			$("#tbl1 tr:last").clone(true).insertAfter("#tbl1 tr:last");
			
			$("#tbl1 tr:last input").val("");
			$("#tbl1 tr:last input:first").focus();
		}
		
		function removeRow() {
			$("#tbl1 tr:last").remove();
			alert($("#tbl1 tr:last").length);			
		}
		
		$(document).ready(function() {
			$("input.lastElement:last").keypress(function (e) {
				if (e.which == 13) {
					save();
					addRow();
				}
			});
		});
		
		function save() {
			alert("save");
		}
	
	</script>
	
</head>
<body>

	<table id="tbl1" cellpadding="0" cellspacing="0">
		<tr>
			<td align="center">Name</td>
			<td align="center">Family</td>
			<td align="center">Age</td>
		</tr>
		<tr id="tr1">
			<td align="center"><input type="text" /></td>
			<td align="center"><input type="text" /></td>
			<td align="center"><input type="text" class="lastElement" /></td>
		</tr>		
	</table>
	
	<table id="tbl2" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<a href="#" onclick="addRow()">add</a>
			<a href="#" onclick="removeRow()">remove</a>
		</td>
	</tr>
	</table>

</body>
</html>